import { deleteContact, listContact, showProvince} from "@/services/api/contact";
import { convertPageData } from "@/utils/request";
import { openConfirm } from "@/utils/ui";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
import { ActionType, PageContainer, ProColumns, ProTable, ProCard } from "@ant-design/pro-components";
import { Button } from "antd";
import { useRef, useState } from "react";
import InputDialog from "./InputDialog";

////////////////////


export default () => {
    const refAction = useRef<ActionType>(null);
    const [selectedRowKeys, selectRow] = useState<number[]>([]);
    const [contact,setContact] = useState<API.ContactVO>();
    const [visible, setVisible] = useState(false);
    // const [pageData,setPageData] = useState<API.PageContactVO>();
    
    
    //刷新
    const handleClick = async () => {
        refAction.current?.reload();
    }
    

    //展示列表
    const columns: ProColumns<API.ContactVO>[] = [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 100,
          search: false,
        },
        //点击联系人名称可修改
        {
          title: '联系人名称',
          dataIndex: 'name',
          width: 100,
          render: (dom, record) => {
            return (
              <a
                onClick={() => {
                    setContact(record);
                    setVisible(true);
                }}
              >
                {dom}
              </a>
            );
          },
        },
        {
          title: '单位',
          dataIndex: 'department',
          width: 100,
        },
        {
          title: '电话',
          dataIndex: 'telephoneNumber',
          width: 100,
        },
        {
          title: '省份',
          dataIndex: 'province',
          width: 100,
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          width: 150,
        },
        {
            title: '地址',
            dataIndex: 'address',
            width: 150,
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            width: 150,
            search: false,
          },
          {
            title: '创建人',
            dataIndex: 'createdByDesc',
            width: 150,
            search: false,
          },
      ];

      const handleDelete = async () => {
        if (!selectedRowKeys?.length) return;
        openConfirm(`您确定删除${selectedRowKeys.length}条记录吗`, async () => {
          await deleteContact(selectedRowKeys);
          refAction.current?.reload();
        });
      };

    return (
      //标头
    <PageContainer>
        <ProTable<API.ContactVO>
        pagination={{pageSize:10}}//分页
        actionRef={refAction}
        rowKey="id"
        request={async (param = {}) => {
          return convertPageData(await listContact(param));
        }}
        toolBarRender={() => [
          //点击按钮时，将contact赋值为undefined，显示对话框
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              setContact(undefined);
              setVisible(true);
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
          <Button
            type="primary"
            key="primary"
            danger
            onClick={handleDelete}
            disabled={!selectedRowKeys?.length}
          >
            <DeleteOutlined /> 删除
          </Button>,
        ]}
        columns={columns}
        //行可选
        rowSelection={{
          onChange: (rowKeys) => {
            selectRow(rowKeys as number[]);
          },
        }}
      />

{/* 输入框 */}
      <InputDialog
        detailData={contact}
        onClose={(result) => {
          setVisible(false);
          result && refAction.current?.reload();
        }}
        visible={visible}
      />
    </PageContainer>
    );
};